<template>
  <div class="user-layout-wrapper">
    <!--    <a-row style="height:100%">-->
    <!--      <a-col :span="15" style="height:100%">-->
    <!--        <img src="login-logo.png" class="login-logo" />-->
    <!--        <div class="banner-con"></div>-->
    <!--      </a-col>-->
    <!--      <a-col :span="9" style="height:100%;position:relative">-->
    <!--        <div class="login-content">-->
    <!--          <div class="content-wrap">-->
    <!--            <div class="main">-->
    <!--              <route-view></route-view>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </a-col>-->
    <!--    </a-row>-->
    <div class="login-container">
      <div class="login_logo load2">
<!--        <img src="login-logo.png" />-->
      </div>
      <!--      <div class="load3 login_temp">-->
      <!--        <div class="title">登录</div>-->
      <!--      </div>-->
      <div class="login_temp">
        <route-view></route-view>
      </div>
      <div class="login_bg load1">
        <div class="login_people">
          <div class="scan"></div>
        </div>
        <!--扩散范围1-->
        <div
          class="login_round0 load4"
          style="left: 670px; top: 795px; transform: scale(1.5,1.0); animation-delay: 0.7s;"
        >
          <div class="line1"></div>
          <div class="round1"></div>
          <div class="round2"></div>
          <div class="round3"></div>
        </div>
        <!--扩散范围2-->
        <div
          class="login_round0 load4"
          style="left: 410px; top: 565px; transform: scale(1, 0.66); animation-delay: 0.85s;"
        >
          <div class="line1"></div>
          <div class="round1"></div>
          <div class="round2"></div>
          <div class="round3"></div>
        </div>
        <!--扩散范围3-->
        <div
          class="login_round0b load4"
          style="left: 1160px; top: 555px; transform: scale(0.9, 0.6); animation-delay: 1s;"
        >
          <div class="line1"></div>
          <div class="round1"></div>
          <div class="round2"></div>
          <div class="round3"></div>
        </div>
        <!--动态数据1-->
        <div class="login_data1 load4" style="animation-delay: 1.1s">
          <div class="d0 d1"></div>
          <div class="d0 d2"></div>
          <div class="d0 d3"></div>
          <div class="d0 d4"></div>
          <div class="d0 d5"></div>
          <div class="d0 d6"></div>
        </div>
        <!--闪电图标-->
        <div class="load5" style="animation-delay: 1.1s">
          <div class="login_icon1"></div>
        </div>
        <!--电池-->
        <div class="load5" style="animation-delay: 1.2s">
          <div class="login_battery">
            <div class="b1"></div>
          </div>
        </div>
        <!--打点1-->
        <div class="load5" style="animation-delay: 2.8s">
          <div class="login_point" style="left: 470px; top: 770px; transform: scale(0.9, 0.9);">
            <div class="color login_point1">
              <img src="~@/assets/images/login2/login_i1.svg" />
            </div>
          </div>
        </div>
        <!--打点3-->
        <div class="load5" style="animation-delay: 3.1s">
          <div class="login_point" style="left: 142px; top: 278px; transform: scale(0.8, 0.8);">
            <div class="color login_point2">
              <img src="~@/assets/images/login2/login_i3.svg" />
            </div>
          </div>
        </div>
      </div>

      <div class="login_left load6">
        <!--圆1-->
        <div class="login_yuan login_y1"></div>
        <div class="login_yuan login_y2"></div>
        <div class="login_yuan login_y3"></div>
        <div class="login_z1" style="left: 20px; top: 30px;">23</div>
        <div class="login_z1" style="left: 100px; top: 30px;">67</div>
        <div class="login_z1" style="left: 180px; top: 30px;">46</div>
        <!--滚动文字1-->
        <div class="login_w1">
          <div class="word1"></div>
        </div>
        <!--左侧数据2-->
        <div class="login_data2">
          <div class="d2 d2d1"></div>
          <div class="d2 d2d2"></div>
          <div class="d2 d2d3"></div>
          <div class="d2 d2d4"></div>
          <div class="d2 d2d5"></div>
          <div class="ds"></div>
          <div class="ds"></div>
          <div class="ds"></div>
          <div class="ds"></div>
          <div class="ds"></div>
        </div>
        <!--滚动文字2-->
        <div class="login_w2">
          <div class="word2"></div>
        </div>
      </div>

      <div class="login_right load7">
        <!--右侧数据1-->
        <div class="login_data3">
          <div class="d3d1 d1a"></div>
          <div class="d3d1 d1b"></div>
          <div class="d3d1 d1c"></div>
          <div class="d3d1 d1d"></div>
          <div class="d3d1 d1e"></div>
          <div class="d3d1 d1f"></div>
          <div class="d3d2 d2a"></div>
          <div class="d3d2 d2b"></div>
          <div class="d3d2 d2c"></div>
          <div class="d3d2 d2d"></div>
          <div class="d3d2 d2e"></div>
          <div class="d3d2 d2f"></div>
        </div>
        <!--滚动数据3-->
        <div class="login_w3">
          <div class="word3"></div>
        </div>
        <!--右侧数据2-->
        <div class="login_data4">
          <div class="d4"></div>
        </div>
        <!--滚动数据4-->
        <div class="login_w4">
          <div class="word4"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import RouteView from './RouteView'
export default {
  name: 'UserLayout',
  components: { RouteView },
  mounted () {
    const locking = this.$ls.get('User_Locking')
    if (!locking) {
      this.$ls.set('User_Locking', {})
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  position: relative;
}
.user-layout-wrapper {
  input::-webkit-input-placeholder {
    color: #cecece;
  }

  .login_bg {
    position: absolute;
    width: 1920px;
    height: 1080px;
    z-index: 1;
    left: 0;
    top: 0;
    background: url(~@/assets/images/login2/login_bg.jpg) no-repeat;
    background-size: contain;
  }

  .login_temp {
    position: absolute;
    padding-bottom: 15px;
    z-index: 99;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    /* background: url(~@/assets/images/login2/login_temp1.png); */
    background: white;
    background-size: cover;
    box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.35);
    color: #333;
    border-radius: 10px;

    .title {
      font-size: 16px;
      line-height: 22px;
      text-align: center;
      margin-top: 35px;
    }

    .input-panel {
      padding: 0 40px;
      margin-top: 28px;
      overflow: hidden;

      .name {
        font-size: 12px;
        line-height: 17px;
      }

      .input-container {
        height: 34px;
        box-sizing: border-box;
        border-bottom: 1px solid #d8d8d8;
        margin-bottom: 9px;

        .full-input {
          font-size: 12px;
          border: none;
          outline: none;
          margin-top: 8px;
        }
      }

      .varify-number-container {
        width: 100px;
        height: 30px;
        margin-top: 4px;
        background: rgba(216, 216, 216, 1);
        float: right;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        font-size: 15px;
        cursor: pointer;
        user-select: none;
      }

      .submit-btn {
        width: 100%;
        margin-top: 35px;
        background: #f54d23;
        border-color: #f54d23;

        &:hover {
          background: #f54d23 * 1.2;
        }
      }
    }
  }

  .login_logo {
    //width: 298px;
    //height: 45px;
    position: absolute;
    z-index: 99;
    left: 50%;
    top: 40px;
    transform: translate(-50%, 0);
  }

  .login_round0,
  .login_round0a,
  .login_round0b {
    width: 150px;
    height: 150px;
    position: absolute;
    transform: scale(1, 0.6);
    z-index: 9;
  }

  .login_round0a .line1 {
    background: linear-gradient(rgba(255, 77, 114, 0), rgba(255, 77, 114, 1));
  }

  .login_round0a .round1 {
    background-image: url(~@/assets/images/login2/2222.svg);
  }

  .login_round0a .round2 {
    background: rgba(255, 77, 114, 1);
  }

  .login_round0a .round3 {
    background: rgba(255, 77, 114, 0.1);
    border: 1px solid rgba(255, 77, 114, 0.3);
  }

  .login_round0b .line1 {
    background: linear-gradient(rgba(248, 231, 28, 0), rgba(248, 231, 28, 1));
  }

  .login_round0b .round1 {
    background-image: url(~@/assets/images/login2/3333.svg);
  }

  .login_round0b .round2 {
    background: rgba(248, 231, 28, 1);
  }

  .login_round0b .round3 {
    background: rgba(248, 231, 28, 0.1);
    border: 1px solid rgba(248, 231, 28, 0.3);
  }

  .login_data1 {
    width: 85px;
    height: 40px;
    z-index: 8;
    position: absolute;
    left: 420px;
    top: 265px;
    transform: skew(0deg, 12deg);
  }

  .login_data1 .d0 {
    width: 10px;
    position: absolute;
    bottom: 0;
    animation-duration: 0.4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate-reverse;
    animation-fill-mode: forwards;
  }

  .login_data1 .d1 {
    height: 40px;
    left: 0;
    animation-name: d1d1;
    background-color: #50e3c2;
  }

  .login_data1 .d2 {
    height: 20px;
    left: 15px;
    animation-name: d1d2;
    background-color: #ffd240;
  }

  .login_data1 .d3 {
    height: 30px;
    left: 30px;
    animation-name: d1d3;
    background-color: #40daff;
  }

  .login_data1 .d4 {
    height: 25px;
    left: 45px;
    animation-name: d1d4;
    background-color: #50e3c2;
  }

  .login_data1 .d5 {
    height: 36px;
    left: 60px;
    animation-name: d1d5;
    background-color: #ffd240;
  }

  .login_data1 .d6 {
    height: 28px;
    left: 75px;
    animation-name: d1d6;
    background-color: #40daff;
  }

  @keyframes d1d1 {
    0% {
      height: 40px;
    }
    100% {
      height: 28px;
    }
  }

  @keyframes d1d2 {
    0% {
      height: 20px;
    }
    100% {
      height: 24px;
    }
  }

  @keyframes d1d3 {
    0% {
      height: 30px;
    }
    100% {
      height: 21px;
    }
  }

  @keyframes d1d4 {
    0% {
      height: 25px;
    }
    100% {
      height: 32px;
    }
  }

  @keyframes d1d5 {
    0% {
      height: 36px;
    }
    100% {
      height: 30px;
    }
  }

  @keyframes d1d6 {
    0% {
      height: 28px;
    }
    100% {
      height: 18px;
    }
  }

  .login_icon1 {
    width: 31px;
    height: 40px;
    background: url(~@/assets/images/login2/login_icon1.svg);
    background-size: cover;
    position: absolute;
    left: 620px;
    top: 370px;
    animation-name: lightning;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-direction: alternate-reverse;
    margin: 0;
  }

  @keyframes lightning {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0.2;
    }
  }

  .login_battery {
    width: 18px;
    height: 52px;
    border: 1px solid #50e3c2;
    position: absolute;
    z-index: 8;
    left: 1320px;
    top: 420px;
    transform: skew(0deg, 12deg);
  }

  .login_battery .b1 {
    width: 14px;
    height: 48px;
    position: absolute;
    z-index: 8;
    left: 2px;
    bottom: 2px;
    background: url(~@/assets/images/login2/login_bat.svg);
    background-size: 18px 48px;
    background-position: bottom;
    animation-name: b1;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }

  @keyframes b1 {
    0% {
      height: 9px;
    }
    20% {
      height: 9px;
    }
    21% {
      height: 18px;
    }
    40% {
      height: 18px;
    }
    41% {
      height: 29px;
    }
    60% {
      height: 29px;
    }
    61% {
      height: 38px;
    }
    80% {
      height: 38px;
    }
    81% {
      height: 48px;
    }
    100% {
      height: 48px;
    }
  }

  .login_point {
    width: 40px;
    height: 53px;
    background: url(~@/assets/images/login2/point_shadow.svg) no-repeat bottom;
    position: absolute;
    z-index: 8;
  }
  .login_point1 {
    background: url(~@/assets/images/login2/login_point1.svg) no-repeat;
  }
  .login_point2 {
    background: url(~@/assets/images/login2/login_point1.svg) no-repeat;
    background: url(~@/assets/images/login2/login_point2.svg) no-repeat;
    animation-delay: 0.3s;
  }

  .login_point .color {
    width: 40px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    animation-name: point1;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }

  .login_point .color img {
    width: 24px;
    position: absolute;
    left: 8px;
    top: 8px;
  }

  @keyframes point1 {
    0% {
      top: 0;
    }
    10% {
      top: -8px;
    }
    13% {
      top: 0;
    }
    15% {
      top: -3px;
    }
    100% {
      top: -3px;
    }
  }

  .line1 {
    width: 10px;
    height: 300px;
    background: linear-gradient(rgba(80, 227, 194, 0), rgba(80, 227, 194, 1));
    position: absolute;
    left: 70px;
    bottom: 70px;
    border-radius: 5px;
    z-index: 100;
    animation-name: l1;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate-reverse;
    animation-fill-mode: forwards;
    animation-play-state: running;
    opacity: 1;
  }

  @keyframes l1 {
    0% {
      height: 200px;
    }
    100% {
      height: 400px;
    }
  }

  .round1 {
    z-index: 99;
    width: 60px;
    height: 60px;
    background-image: url(~@/assets/images/login2/1111.svg);
    background-size: cover;
    position: absolute;
    left: 45px;
    top: 45px;
    margin: 0;
    animation-name: a1;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-play-state: running;
    opacity: 1;
  }

  @keyframes a1 {
    0% {
      opacity: 1;
      transform: rotate(0deg);
    }
    100% {
      opacity: 1;
      transform: rotate(360deg);
    }
  }

  .round2 {
    z-index: 98;
    width: 60px;
    height: 60px;
    background: rgba(80, 227, 194, 1);
    position: absolute;
    left: 45px;
    top: 45px;
    margin: 0;
    border-radius: 50%;
    animation-name: a2;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate-reverse;
    animation-fill-mode: both;
    animation-play-state: running;
    opacity: 1;
  }

  @keyframes a2 {
    0% {
      opacity: 0.1;
      width: 70px;
      height: 70px;
      left: 40px;
      top: 40px;
    }
    100% {
      opacity: 0.2;
      width: 90px;
      height: 90px;
      left: 30px;
      top: 30px;
    }
  }

  .round3 {
    z-index: 98;
    width: 150px;
    height: 150px;
    background: rgba(80, 227, 194, 0.1);
    border: 1px solid rgba(80, 227, 194, 0.3);
    opacity: 1;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    border-radius: 50%;
    animation-name: a3;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
    animation-direction: alternate-reverse;
    animation-fill-mode: both;
    animation-play-state: running;
  }

  @keyframes a3 {
    0% {
      opacity: 0.5;
      width: 0;
      height: 0;
      left: 75px;
      top: 75px;
    }
    100% {
      opacity: 1;
      width: 150px;
      height: 150px;
      left: 0;
      top: 0;
    }
  }

  .login_people {
    width: 36px;
    height: 90px;
    background: url(~@/assets/images/login2/login_people.svg) no-repeat bottom;
    position: absolute;
    left: 1160px;
    top: 700px;
    animation-name: people;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate-reverse;
    animation-play-state: running;
    animation-delay: 4s;
    transform: skew(0deg, 0deg);
    opacity: 0;
  }

  @keyframes people {
    0% {
      opacity: 1;
      left: 1160px;
      top: 700px;
    }
    100% {
      opacity: 1;
      left: 1360px;
      top: 750px;
    }
  }

  .login_people .scan {
    width: 36px;
    height: 36px;
    background: url(~@/assets/images/login2/login_scan.svg) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 0;
    top: 0;
    animation-name: scan;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate-reverse;
    animation-play-state: running;
  }

  @keyframes scan {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0.1;
    }
  }

  /*-----------------------------------左侧边栏开始-------------------------------*/
  .login_left {
    opacity: 0.5;
    z-index: 9;
    position: absolute;
  }

  .login_yuan {
    width: 60px;
    height: 60px;
    background: url(~@/assets/images/login2/login_y1.svg);
    background-size: cover;
    position: absolute;
    z-index: 8;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  .login_y1 {
    animation-name: y1;
    left: 20px;
    top: 30px;
    transform: rotate(0deg);
  }

  .login_y2 {
    animation-name: y2;
    left: 100px;
    top: 30px;
    transform: rotate(30deg);
  }

  .login_y3 {
    animation-name: y3;
    left: 180px;
    top: 30px;
    transform: rotate(90deg);
  }

  @keyframes y1 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes y2 {
    0% {
      transform: rotate(150deg);
    }
    100% {
      transform: rotate(510deg);
    }
  }

  @keyframes y3 {
    0% {
      transform: rotate(90deg);
    }
    100% {
      transform: rotate(450deg);
    }
  }

  .login_z1 {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 24px;
    text-align: center;
    color: #dddddd;
    position: absolute;
    z-index: 8;
  }

  .login_w1 {
    width: 220px;
    height: 340px;
    overflow: hidden;
    position: absolute;
    left: 25px;
    top: 120px;
    z-index: 8;
  }

  .login_w1 .word1 {
    width: 220px;
    height: 3600px;
    background: url(~@/assets/images/login2/login_word1.png);
    position: absolute;
    left: 0;
    animation-name: word1;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-play-state: running;
    opacity: 0.2;
  }

  @keyframes word1 {
    0% {
      top: 0px;
    }
    100% {
      top: -1800px;
    }
  }

  .login_w2 {
    width: 220px;
    height: 1800px;
    overflow: hidden;
    position: absolute;
    left: 25px;
    top: 640px;
    z-index: 8;
  }

  .login_w2 .word2 {
    width: 220px;
    height: 3600px;
    background: url(~@/assets/images/login2/login_word1.png);
    position: absolute;
    left: 0;
    animation-name: word2;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-play-state: running;
    opacity: 0.2;
  }

  @keyframes word2 {
    0% {
      top: -500px;
    }
    100% {
      top: -2300px;
    }
  }

  .login_data2 {
    width: 220px;
    height: 100px;
    position: absolute;
    left: 20px;
    top: 500px;
    z-index: 8;
  }

  .login_data2 .ds {
    width: 220px;
    height: 10px;
    background-color: rgba(0, 0, 0, 0.03);
    margin: 0 0 10px 0;
    border-radius: 5px;
  }

  .login_data2 .d2 {
    height: 10px;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    left: 0;
    top: 0;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
    animation-direction: alternate-reverse;
    opacity: 1;
  }

  .login_data2 .d2d1 {
    animation-name: d2d1;
    left: 0;
    top: 0;
    animation-duration: 1s;
  }

  .login_data2 .d2d2 {
    animation-name: d2d2;
    left: 0;
    top: 20px;
    animation-duration: 1.2s;
  }

  .login_data2 .d2d3 {
    animation-name: d2d3;
    left: 0;
    top: 40px;
    animation-duration: 2s;
  }

  .login_data2 .d2d4 {
    animation-name: d2d4;
    left: 0;
    top: 60px;
    animation-duration: 1.4s;
  }

  .login_data2 .d2d5 {
    animation-name: d2d5;
    left: 0;
    top: 80px;
    animation-duration: 1.5s;
  }

  @keyframes d2d1 {
    0% {
      width: 100px;
    }
    100% {
      width: 160px;
    }
  }

  @keyframes d2d2 {
    0% {
      width: 110px;
    }
    100% {
      width: 140px;
    }
  }

  @keyframes d2d3 {
    0% {
      width: 80px;
    }
    100% {
      width: 170px;
    }
  }

  @keyframes d2d4 {
    0% {
      width: 140px;
    }
    100% {
      width: 190px;
    }
  }

  @keyframes d2d5 {
    0% {
      width: 70px;
    }
    100% {
      width: 110px;
    }
  }

  /*-----------------------------------右侧边栏开始-------------------------------*/
  .login_right {
    opacity: 0.5;
    z-index: 9;
    position: relative;
  }

  .login_data3 {
    width: 220px;
    height: 100px;
    position: absolute;
    right: 20px;
    top: 30px;
    z-index: 8;
  }

  .login_data3 .d3d1 {
    width: 8px;
    height: 100px;
    background-color: #000;
    position: absolute;
    bottom: 0;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate-reverse;
    opacity: 0.1;
  }

  .login_data3 .d3d2 {
    width: 8px;
    height: 100px;
    background-color: #000;
    position: absolute;
    bottom: 0;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate-reverse;
    opacity: 0.05;
  }

  .login_data3 .d1a {
    animation-name: d1a;
    left: 0;
    animation-duration: 0.9s;
  }

  .login_data3 .d1b {
    animation-name: d1b;
    left: 40px;
    animation-duration: 1s;
  }

  .login_data3 .d1c {
    animation-name: d1c;
    left: 80px;
    animation-duration: 1.05s;
  }

  .login_data3 .d1d {
    animation-name: d1d;
    left: 120px;
    animation-duration: 0.93s;
  }

  .login_data3 .d1e {
    animation-name: d1e;
    left: 160px;
    animation-duration: 0.85s;
  }

  .login_data3 .d1f {
    animation-name: d1f;
    left: 200px;
    animation-duration: 1.01s;
  }

  .login_data3 .d2a {
    animation-name: d2a;
    left: 12px;
    animation-duration: 1.1s;
  }

  .login_data3 .d2b {
    animation-name: d2b;
    left: 52px;
    animation-duration: 1.02s;
  }

  .login_data3 .d2c {
    animation-name: d2c;
    left: 92px;
    animation-duration: 0.95s;
  }

  .login_data3 .d2d {
    animation-name: d2d;
    left: 132px;
    animation-duration: 0.99s;
  }

  .login_data3 .d2e {
    animation-name: d2e;
    left: 172px;
    animation-duration: 1.03s;
  }

  .login_data3 .d2f {
    animation-name: d2f;
    left: 212px;
    animation-duration: 0.95s;
  }

  @keyframes d1a {
    0% {
      height: 53px;
    }
    100% {
      height: 100px;
    }
  }

  @keyframes d1b {
    0% {
      height: 45px;
    }
    100% {
      height: 19px;
    }
  }

  @keyframes d1c {
    0% {
      height: 67px;
    }
    100% {
      height: 48px;
    }
  }

  @keyframes d1d {
    0% {
      height: 35px;
    }
    100% {
      height: 86px;
    }
  }

  @keyframes d1e {
    0% {
      height: 81px;
    }
    100% {
      height: 56px;
    }
  }

  @keyframes d1f {
    0% {
      height: 57px;
    }
    100% {
      height: 43px;
    }
  }

  @keyframes d2a {
    0% {
      height: 45px;
    }
    100% {
      height: 60px;
    }
  }

  @keyframes d2b {
    0% {
      height: 17px;
    }
    100% {
      height: 69px;
    }
  }

  @keyframes d2c {
    0% {
      height: 83px;
    }
    100% {
      height: 38px;
    }
  }

  @keyframes d2d {
    0% {
      height: 56px;
    }
    100% {
      height: 46px;
    }
  }

  @keyframes d2e {
    0% {
      height: 38px;
    }
    100% {
      height: 76px;
    }
  }

  @keyframes d2f {
    0% {
      height: 28px;
    }
    100% {
      height: 53px;
    }
  }

  .login_w3 {
    width: 220px;
    height: 300px;
    overflow: hidden;
    position: absolute;
    right: 20px;
    top: 160px;
    z-index: 8;
  }

  .login_w3 .word3 {
    width: 220px;
    height: 600px;
    background: url(~@/assets/images/login2/login_word2.png);
    position: absolute;
    left: 0;
    animation-name: word3;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    opacity: 0.3;
  }

  @keyframes word3 {
    0% {
      top: 0px;
    }
    5.6% {
      top: 0px;
    }
    6.6% {
      top: -20px;
    }
    12.3% {
      top: -20px;
    }
    13.3% {
      top: -40px;
    }
    19% {
      top: -40px;
    }
    20% {
      top: -60px;
    }
    25.6% {
      top: -60px;
    }
    26.6% {
      top: -80px;
    }
    32.3% {
      top: -80px;
    }
    33.3% {
      top: -100px;
    }
    39% {
      top: -100px;
    }
    40% {
      top: -120px;
    }
    45.6% {
      top: -120px;
    }
    46.6% {
      top: -140px;
    }
    52.3% {
      top: -140px;
    }
    53.3% {
      top: -160px;
    }
    59% {
      top: -160px;
    }
    60% {
      top: -180px;
    }
    65.6% {
      top: -180px;
    }
    66.6% {
      top: -200px;
    }
    72.3% {
      top: -200px;
    }
    73.3% {
      top: -220px;
    }
    79% {
      top: -220px;
    }
    80% {
      top: -240px;
    }
    85.6% {
      top: -240px;
    }
    86.6% {
      top: -260px;
    }
    92.3% {
      top: -260px;
    }
    93.3% {
      top: -280px;
    }
    99% {
      top: -280px;
    }
    100% {
      top: -300px;
    }
  }

  .login_data4 {
    width: 220px;
    height: 160px;
    position: absolute;
    right: 20px;
    top: 480px;
    border: 1px solid #333;
    overflow: hidden;
    opacity: 0.15;
  }

  .login_data4 .d4 {
    width: 800px;
    height: 130px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: url(~@/assets/images/login2/login_d4.png);
    animation-name: d4;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    opacity: 0.5;
  }

  @keyframes d4 {
    0% {
      left: 0px;
    }
    100% {
      left: -400px;
    }
  }

  .login_w4 {
    width: 220px;
    height: 1800px;
    overflow: hidden;
    position: absolute;
    right: 20px;
    top: 680px;
    z-index: 8;
  }

  .login_w4 .word4 {
    width: 220px;
    height: 3600px;
    background: url(~@/assets/images/login2/login_word1.png);
    position: absolute;
    left: 0;
    animation-name: word4;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-play-state: running;
    opacity: 0.2;
  }

  @keyframes word4 {
    0% {
      top: -1000px;
    }
    100% {
      top: -2800px;
    }
  }

  /*-----------------------------------加载顺序-------------------------------*/
  .load1 {
    animation-name: load1;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-delay: 0s;
  }

  .load2 {
    animation-name: load2;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
    animation-delay: 0.5s;
    opacity: 0;
  }

  .load3 {
    animation-name: load3;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-duration: 0.3s;
    animation-delay: 1.7s;
    opacity: 0;
  }

  .load4 {
    animation-name: load4;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-duration: 0.2s;
    opacity: 0;
  }

  .load5 {
    animation-name: load5;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-duration: 0.2s;
    opacity: 0;
  }

  .load6 {
    animation-name: load6;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
    left: -240px;
    animation-delay: 2s;
  }

  .load7 {
    animation-name: load7;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
    right: -240px;
    animation-delay: 2s;
  }

  @keyframes load1 {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes load2 {
    0% {
      margin-top: 10px;
      opacity: 0;
    }
    100% {
      margin-top: 0;
      opacity: 1;
    }
  }

  @keyframes load3 {
    0% {
      transform: rotateY(90deg);
      opacity: 0.5;
    }
    100% {
      transform: rotateY(0deg);
      opacity: 1;
    }
  }

  @keyframes load4 {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes load5 {
    0% {
      opacity: 0;
      margin-top: 20px;
    }
    100% {
      opacity: 1;
      margin: 0;
    }
  }

  @keyframes load6 {
    0% {
      left: -240px;
    }
    100% {
      left: 20px;
    }
  }

  @keyframes load7 {
    0% {
      right: -240px;
    }
    100% {
      right: 20px;
    }
  }

  .login-container {
    position: relative;
    width: 1920px;
    height: 1080px;
    margin: 0;
    padding: 0;
    background-color: #fcfcfd;
    overflow: hidden;
    z-index: 11;
  }

  .imgCode {
    width: 120px;
    height: 30px;
  }

  .passwordIcon {
    float: right;
    margin-right: 10px;
  }
}
</style>
